<template>
  <svg
    :width="size"
    :height="size"
    viewBox="0 0 1000 1000"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <rect x="9" y="9" width="982" height="982" rx="258" fill="var(--font-color-light)" />
    <rect
      x="109.47"
      y="186"
      width="510.397"
      height="114.075"
      rx="57.0375"
      fill="var(--color-secondary-light)"
    />
    <rect
      x="395.245"
      y="699.925"
      width="496.285"
      height="114.075"
      rx="57.0375"
      fill="var(--color-secondary-light)"
    />
    <rect
      x="650.444"
      y="525.873"
      width="241.086"
      height="114.075"
      rx="57.0375"
      fill="var(--color-secondary-light)"
    />
    <rect
      x="381.133"
      y="351.82"
      width="510.397"
      height="114.075"
      rx="57.0375"
      fill="var(--color-secondary-light)"
    />
    <rect
      x="109.47"
      y="525.873"
      width="496.285"
      height="114.075"
      rx="57.0375"
      fill="var(--color-secondary-light)"
    />
    <rect
      x="650.444"
      y="186"
      width="241.086"
      height="114.075"
      rx="57.0375"
      fill="var(--color-secondary-light)"
    />
    <rect
      x="109.47"
      y="351.82"
      width="241.086"
      height="114.075"
      rx="57.0375"
      fill="var(--color-secondary-light)"
    />
    <rect
      x="109.47"
      y="699.925"
      width="241.086"
      height="114.075"
      rx="57.0375"
      fill="var(--color-secondary-light)"
    />
  </svg>
</template>

<script>
export default {
  props: {
    size: {
      type: [Number, String],
      default: 200
    }
  }
};
</script>

<style></style>
